{extend name="./public/base" /}
{block name="title"}详情页{/block}
{block name="style"}
<style type="text/css">
	.content{
		width: 100%;
		background-color:#fff;
		font-size: 32px;
		color: #6e5858;
	}
	.top{
		width: 100%;
	    background-color: #ffba58;;
	    height: 80px;
	    color: #fff;
	    text-align: center;
	    line-height: 80px;
	    font-size: 32px;
	}
	.banner{
		width: 100%;
		height: 45%;
		margin-top: 2px;
	}
	.swiper-container {
	  width: 100%;
	  height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #ffc3c3;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
 	
    .swiper-pagination-bullet-active {
	    opacity: 1;
	    background: #f15d5d;
	}
	.swiper-pagination-bullet {
	    width: 24px;
	    height: 20px;
	}

	.des{
		width: 100%;
		height: 260px;
	}
	.des_name{
		width: 90%;
	    margin: auto;
	    font-size: 32px;
	    margin-top: 20px;
	}
	.des_name span{
		display: inline-block;
	}
	.des_name .name_{
		font-size: 38px;
    	font-weight: 600;
	}
	.des_name .point_{
		margin-left: 30px;
	}

	.des_other{
		width: 90%;
    	margin: auto;
    	margin-top: 20px;
	}

	.des_other span{
		display: inline-block;
		margin-top: 10px;
	}

	.des_other .age{
		border: 2px solid #ffba58;
    	padding: 0px 20px;
    	color: #ffba58;
	}
	.des_other .height{
		border: 2px solid blue;
    	padding: 0px 20px;
    	color: blue;
	}
	.des_other .zodiac{
		border: 2px solid pink;
    	padding: 0px 20px;
    	color: pink;
	}

	.like{
		text-align: center;
    	margin-top: 80px;
	}
	.line{
		width: 100%;
	    height: 30px;
	    background-color: #efeded;
	}
	.item{
		width: 96%;
	    margin: auto;
	    margin-top: 20px;
	}
	.item .title{

	}

	.item .title span{
		display: inline-block;
	}

	.item .title .dot{
		width: 20px;
	    height: 50px;
	    background-color: #ffba58;
	    border-radius: 10px;
	    position: relative;
	    top: 10px;
	}

	.item .title .title_{
		font-size: 38px;
    	font-weight: 600;
	}

	.item .item_content{
		margin: 30px;
	}

	.item .item_content span{
		display: inline-block;
		padding: 0 30px;
		border-radius: 20px;
		background-color:antiquewhite;
		margin-left: 30px;
		margin-top:18px;
	}
	.item .item_content .span{
		display: inline-block;
		padding: 0 30px;
		border-radius: 20px;
		background-color:#efeff491;
		margin-left: 30px;
		margin-top:18px;
	}
	.back{
		float: left;
	    margin-top: 14px;
	    padding-left: 10px;
	}
	.look_weixin{
		position: fixed;
	    left: 0px;
	    bottom: 0px;
	    width: 100%;
	    height: 90px;
	    background-color: #ffba58;
	    z-index: 9999;
	    text-align: center;
	    line-height: 90px;
	    color: #fff;
	    border-radius: 20px;
	}
	.answer{

	}
	.list_title{
		color: black;
	}
	.list_answer{
		font-size: 28px;
	    border-bottom: 1px solid gray;
	    padding: 20px 0px;
	}
   	
</style>
{/block}
{block name="main"}
	<div id="app_content" class="content"> 
		<div class="top" >
			<span class="back"><img onclick="javascript:history.back(-1);" src="__STATIC__/images/back5.png" alt=""></span>
			<span>{{title}}</span>
		</div>
		<div class="banner">
			<div class="swiper-container">
			    <div class="swiper-wrapper">
				    <div class="swiper-slide" v-for="img in photos"><image @click="openimg()" style="width: 100%;height: 100%;" :src="img"/></div>
			    </div>
			    <!-- Add Pagination -->
			    <div class="swiper-pagination"></div>
			</div>	
		</div>
		<div class="des weui-flex">
			<div class="weui-flex__item">
				<div class="des_name">
					<span class="name_">{{info.user_name}}</span>
					<span class="point_">/魅力值：{{info.up_num}}点</span>
				</div>
				<div class="des_other">
					<span class="age">♂{{info.birthday}}</span>
					<span class="height">{{info.height}}</span>
					<span class="zodiac">{{info.zodiac_id}}</span>
				</div>
			</div>
            <div class="placeholder" style="width: 30%">
            	<div class="like"><img src="__STATIC__/images/zan3.png" alt=""></div>
            </div>
		</div>
		<div class="line"></div>
		<div class="item">
			<div class="title">
				<span class="dot"></span>
				<span class="title_">会员标签</span>
			</div>
			<div class="item_content">
				<span class="list" v-for="tag in info.tags_ids">{{tag}}</span>
				<!-- <span class="list">懒作</span>
				<span class="list">懒作</span>
				<span class="list">懒作</span> -->
			</div>
		</div>
		<div class="line"></div>
		<div class="item">
			<div class="title">
				<span class="dot"></span>
				<span class="title_">个人资料</span>
			</div>
			<div class="item_content">
				<span class="list span" v-for="person in info.person_data">{{person}}</span>
			</div>
		</div>
		<div class="line"></div>
		<div class="item">
			<div class="title">
				<span class="dot"></span>
				<span class="title_">更多资料</span>
			</div>
			<div class="item_content">
				<div class="answer" v-for="qu in info.question">
					<div class="list_title">{{qu.title}}</div>
					<div class="list_answer">{{qu.answer}}</div>
				</div>
				
			</div>
		</div>
		<div class="line"></div>
		<div class="item" style="margin-bottom: 160px;">
			<div class="title">
				<span class="dot"></span>
				<span class="title_">择偶条件</span>
			</div>
			<div class="item_content">
				<span class="list" v-for="mate in info.mate_data">{{mate}}</span>
			</div>
		</div>
		<div class="look_weixin" @click="look_info()"><span class="weixin"></span><span class="weixin_text">查看微信号</span></div>
	</div>
{/block}
{block name="script"}
<script type="text/javascript" >
    $(document).ready(function(){ 
		var host = "http://"+document.domain+"/api.php/";
		var vm  = new Vue({
			el: '#app_content',
			data: {
			    info: [],
			    title:'用户详情',
			    photos:[],
			},
		    methods:{
		        getdetail:function(){
		        	var t = this;
		        	$.ajax({
		        		url: host+'member/detail',
		        		type: 'post',
		        		dataType: 'json',
		        		data: {id: 1},
		        		success:function(data){
		        			console.log(data.code);
		        			if(data.code == 1){
		        				t.info = data.data;
		        				t.title = "用户详情";
		        				for(var i=0;i<data.data.images.length;i++){
		        					t.photos.push(data.data.images[i]);
		        				}
		        				// t.photos = data.data.images;
		        				console.log(123);
		        				console.log(t.info);
		        				console.log(t.title);
		        				console.log(t.photos);
		        			}
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        },
		        look_info:function(e){
		        	var id = 1;
		        	$.ajax({
		        		url: host+'member/weixin',
		        		type: 'post',
		        		dataType: 'json',
		        		data: {'id':id},
		        		success:function(data){
		        			console.log(data);
		        			$('.content').append(data.data);
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        },
		        openimg:function(){
		        	console.log(4325345);
		        	console.log($.photoBrowser);
		   //      	var pb1 = $.photoBrowser({
					// 	items: [
					// 	    "./images/swiper-1.jpg",
					// 	    "./images/swiper-2.jpg",
					// 	    "./images/swiper-3.jpg"
					// 	]
					// });
		        }
		        

		    },
		    mounted: function () {
	            console.log("已初始化");
	            this.getdetail();
	        }

		})
		var mySwiper = new Swiper('.swiper-container', {
		    autoplay:5000,
		    loop:true,
		    pagination: {
		        el: '.swiper-pagination',
		    },
		    observer:true,//修改swiper自己或子元素时，自动初始化swiper 
			observeParents:false,//修改swiper的父元素时，自动初始化swiper 
			onSlideChangeEnd: function(swiper){ 
			　　　swiper.update();  
			　　　mySwiper.startAutoplay();
			　　 mySwiper.reLoop();  
			}
	    });
	});
	// var pb1 = $.photoBrowser({
	// 	// 这里是放大展示图片的列表
	// 	items: [
	// 	"http://photocdn.sohu.com/20170323/Img484425339.jpeg",
	// 	"https://tse1-mm.cn.bing.net/th?id=OET.3f3251afaad44ed59697c3aaf26949f6&w=135&h=272&c=7&rs=1&qlt=90&o=4&pid=1.9",
	// 	"https://tse1-mm.cn.bing.net/th?id=OET.b50be09f93264dffad23b7e76f9d1d46&w=135&h=272&c=7&rs=1&qlt=90&o=4&pid=1.9",
	// 	"https://tse1-mm.cn.bing.net/th?id=OET.c09214c12f1a4b7289ac9e8fe2e1a294&w=135&h=272&c=7&rs=1&qlt=90&o=4&pid=1.9",
	// 	"http://photocdn.sohu.com/20170323/Img484425339.jpeg"
	// 	],
	// })
	// console.log($pb1);
	$(document).on('click', '.mask_close', function(event) {
		console.log(12334);
		$('.mask_close').parent().parent().remove();
	});

	$(document).on('click', '.rose_mask_close', function(event) {
		console.log(12334);
		$('.rose_mask_close').parent().parent().remove();
	});

	//复制
	var clipboard = new ClipboardJS('.mask_copy');
    clipboard.on('success', function(e) {
        $.toast("复制成功","text");
    });
    clipboard.on('error', function(e) {
        $.toast("复制失败","text");
    });
</script>
{/block}